<template>
	<div>
		<view>
			<div class="content" :class="[disabled ? 'disabled' : '']" @click.stop="open">
				<div class="text">
					<div>
						{{ currentLabel }}
					</div>
				</div>

				<div class="icon">
					<uni-icons v-show="canSelect" type="forward" size="18"></uni-icons>
				</div>
			</div>
			<!-- 普通弹窗 -->
			<uni-popup
				:isMaskClick="false"
				ref="popup"
				background-color="#fff"
				@close="close"
				@maskClick="close">
				<div class="container">
					<!-- 搜索栏 -->
					<div class="topContainer">
						<div class="btn cancel" @click="cancel">取消</div>
						<div class="search" v-if="showFilter">
							<!-- <uni-search-bar -->
							<!-- v-model="searchText" -->
							<!-- class="uni-mt-10" -->
							<!-- radius="5" -->
							<!-- placeholder="请输入过滤内容" -->
							<!-- clearButton="auto" -->
							<!-- cancelButton="none" -->
							<!-- @input.stop="inputHandler" /> -->

							<CarClassify
								ref="CarClassify"
								@sure="sure_CarClassify"
								:labelOverflow="true"></CarClassify>
						</div>
						<div class="btn sure" @click="next" v-if="showNext">下一步</div>
						<div class="btn sure" @click="sure" v-else>确认</div>
					</div>
					<div class="options">
						<div class="loading" v-if="loading">
							<div class="icon">
								<uni-icons type="spinner-cycle" size="24"></uni-icons>
							</div>
							<text>加载中...</text>
						</div>
						<picker-view
							v-if="dictListCopy.length > 0"
							:value="index"
							@change="bindChange"
							class="picker-view"
							:immediate-change="true"
							ref="pickerView">
							<picker-view-column>
								<view class="item" v-for="(item, index) in dictListCopy">
									{{ getDictLabel(item) }}
								</view>
							</picker-view-column>
						</picker-view>
					</div>
				</div>
			</uni-popup>
		</view>
	</div>
</template>

<script>
	import * as app from '@/api/index.js';
	import CarClassify from '@/pages/quota/AForm/carClassify/index.vue';
	export default {
		name: '',
		components: { CarClassify },
		props: {
			state: {
				required: false,
				default: 'write',
			},
			disabled: {
				required: false,
			},
			dict: {
				required: false,
				default: () => {
					return {
						label: 'modelName',
						value: 'id',
					};
				},
			},
			label: {
				required: false,
			},
			format: {
				required: false,
				type: Function,
			},
			joinSymbol: {
				type: String,
				default: '/',
			},
			showFilter: {
				type: Boolean,
				default: true,
			},
			params: {
				type: Object,
				default: () => {},
			},
			validate: {
				required: false,
			},
		},
		data() {
			return {
				index: [0],
				loading: false,
				dictList: [],
				dictListCopy: [],
				searchText: '',
				value: [],
				rawItem: null,
				searchParams: {},
			};
		},
		computed: {
			currentLabel() {
				let word = '';
				// if (this.Empty(this.format)) {
				// 	this.labels?.map((item, index) => {
				// 		if (index == this.rawValue.length - 1) {
				// 			word += `${item ?? '-'}`;
				// 		} else {
				// 			word += `${item ?? '-'} ${this.joinSymbol} `;
				// 		}
				// 	}, word);
				// } else {
				// 	word = this.format(this.labels);
				// }
				let label = this.getDictLabel(this.rawItem);
				if (this.state == 'write' && this.Empty(label) && this.Empty(this.label)) {
					word = `请选择数据`;
				} else if (this.state == 'readonly' && this.Empty(this.label)) {
					word = '-';
				} else {
					word = label ?? this.label;
				}
				return word;
			},
			canSelect() {
				return (this.state == 'write' || this.Empty(this.state)) && this.disabled != true;
			},
		},
		created() {},
		watch: {},
		mounted() {},
		methods: {
			inputHandler() {
				if (this.Empty(this.searchText)) {
					this.dictListCopy = this.dictList;
					return;
				}
				let list = this.dictList?.filter(item => {
					return this.getDictLabel(item).indexOf(this.searchText) !== -1;
				});
				this.dictListCopy = list;
				this.$nextTick(() => {
					this.index = [0];
				});
			},
			getCarTypeList(type) {
				this.loading = true;
				let params = Object.assign(
					{
						pageSize: 100,
						pageNum: 1,
					},
					this.searchParams,
					this.params,
				);
				app.QuotaCarTypeList(params)
					.then(res => {
						this.dictList = res.rows ?? [];
						if (type !== 'search') {
							this.addEmpty();
						}
						this.dictListCopy = this.A_deepClone(this.dictList ?? []);
					})
					.finally(() => {
						this.loading = false;
					});
			},
			close() {
				this.$refs.popup.close();
				this.$nextTick(() => {
					this.reset();
				});
			},
			open() {
				if (!this.validate) {
					uni.showModal({
						title: '提示',
						content: '请选择产品方案!',
						showCancel: false,
					});
					return;
				}

				if (this.canSelect) {
					this.$emit('open');
					this.getCarTypeList();
					this.$refs.popup.open('bottom');
					this.$nextTick(() => {
						this.$emit('opened');
						this.reset();
					});
				}
			},
			initDict() {
				if (Array.isArray(this.dict?.list) && this.dict?.list?.length > 0) {
					let dictList = this.A_deepClone(this.dict.list ?? []);
					if (typeof dictList[0] !== 'object') {
						this.type = 'stringArr';
						dictList = [];
						this.dict?.list?.map(item => {
							dictList.push({
								value: item,
								text: item,
							});
						});
					}
					dictList?.map(item => {
						item.text = this.getDictLabel(item);
						item.value = this.getDictValue(item);
					});
					this.dictList = dictList;

					this.$nextTick(() => {
						this.dictListCopy = this.activedList;
					});
				}
			},
			addEmpty() {
				let index = this.dictList.findIndex(e => this.getDictLabel(e) == '无');
				if (index == -1) {
					let obj = {};
					obj[this.dict?.value ?? 'value'] = undefined;
					obj[this.dict?.label ?? 'label'] = '无';
					this.dictList.unshift(obj);
				}
			},
			bindChange(e) {
				this.index = e.detail.value;
				// this.$emit('bindChange', this.dict.list?.[e.detail.value]);
			},
			sure_CarClassify(value) {
				this.searchParams = {
					brandIds: [value?.value?.[0]],
					seriesIds: [value?.value?.[1]],
					modelIds: [value?.value?.[2]],
				};
				this.getCarTypeList('search');
			},
			sure() {
				this.setSelectData();
				this.$emit('input', this.value);
				this.$emit('sure', {
					value: this.value,
					item: this.rawItem ?? {},
				});
				this.$refs.popup.close();
				this.$nextTick(() => {
					this.reset();
				});
			},
			cancel() {
				this.$refs.popup.close();
				this.$nextTick(() => {
					this.reset();
				});
			},
			setSelectData() {
				this.value = this.getDictValue(this.dictListCopy[this.index[0]]);
				this.rawItem = this.dictListCopy[this.index[0]];
				// this.$nextTick(() => {
				// 	this.index = [0];
				// });
			},
			getDictLabel(data) {
				if (typeof data !== 'object') {
					return data;
				}
				return data?.[this.dict?.label] ?? data?.dictLabel ?? data?.label ?? data?.text;
			},
			getDictValue(data) {
				if (typeof data !== 'object') {
					return data;
				}
				return data?.[this.dict?.value] ?? data?.dictValue ?? data?.value;
			},
			reset() {
				this.activedTab = 0;
				this.index = [0];
				this.searchText = '';
				this.searchParams = {};
				this.dictList = [];
				this.dictListCopy = [];
				this.$refs.CarClassify.reset();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-input {
		line-height: 30rpx;
		margin-left: 10rpx;
	}
	.container {
		padding: 20rpx 20rpx 0 20rpx;
		.topContainer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.search {
				flex: 1;
				min-width: 0;
				padding: 0 25rpx;
			}
		}
		.options {
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			gap: 0 20rpx;
			position: relative;
			width: 750rpx;
			height: 400rpx;
			.item {
				text-align: center;
			}
			.picker-view {
				width: 750rpx;
				height: 400rpx;
			}
			.loading {
				width: 750rpx;
				height: 400rpx;
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon {
					animation: rotate360 5s linear infinite;
				}
			}
		}
	}
	.content {
		// min-height: 32px;
		display: flex;
		align-items: center;
		.text {
			flex: 1;
			min-width: 0;
		}
		.icon {
			margin-left: 15rpx;
		}
	}
	.disabled {
		color: #606266;
	}
	.tab {
		display: flex;
		.tab-item {
			display: flex;
			padding: 15rpx 25rpx;
			.label {
				max-width: 100px;
				text-overflow: ellipsis;
				overflow: hidden;
				word-break: break-all;
				white-space: nowrap;
			}
		}
		.active {
			border-bottom: 5px solid #69a1fa;
		}
	}
	@keyframes rotate360 {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>
